<template>
	<div>
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
			<el-table-column type="selection" width="55" @click="ctions(scope.$index)">
			</el-table-column>
			<el-table-column prop="id" label="ID" width="150">
			</el-table-column>
			<el-table-column prop="name" label="负责人" width="150">
			</el-table-column>
			<el-table-column prop="accounts" label="登入账号" width="150">
			</el-table-column>
			<el-table-column prop="job" label="管理员角色" width="120">
			</el-table-column>
			<el-table-column prop="phone" label="手机号码" width="120">
			</el-table-column>
			<el-table-column prop="password" label="登入密码" width="150">
			</el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="updataIndex(scope.$index,scope.row)">查看</el-button>
					<el-button @click.native.prevent="deleteRow(scope.$index)" type="text" size="small">
						移除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 编辑弹出框 -->
		<el-dialog title="信息详情" :visible.sync="centerDialogVisible" width="25%">
			<el-form ref="form" v-model="upform" label-width="100px" class="faculty">
				<el-form-item label="ID" class="pop">
					<span>{{upform.id}}</span>
				</el-form-item>
				<el-form-item label="负责人" class="pop">
					<span>{{upform.name}}</span>
				</el-form-item>
				<el-form-item label="登入账号" class="pop">
					<span>{{upform.accounts}}</span>
				</el-form-item>
				<el-form-item label="管理员" class="pop">
					<span>{{upform.job}}</span>
				</el-form-item>
				<el-form-item label="手机号码" prop="resource" class="pop">
					<span>{{upform.phone}}</span>
				</el-form-item>
				<el-form-item label="登入密码" class="pop">
					<span>{{upform.password}}</span>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updata()">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="查询">
				<el-input v-model="formInline.user" placeholder="姓名"></el-input>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary">删除勾选</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				upform: {
					id: '',
					name: '',
					accounts: '',
					job: '',
					phone: '',
					password: ''
				},
				//索引
				Index: '',
				//编辑学生信息判断
				centerDialogVisible: false,
				formInline: {
					user: '',
					region: ''
				}
			}
		},

		beforeUpdate() {
			this.$nextTick(function() {
				console.log(this.upform)
				this.tableData[this.Index] = this.upform;
				console.log(this.tableData[this.Index])
			})
		},

		methods: {
			// updataIndex(index) {
			// 	//点击编辑弹出弹窗并获取index
			// 	this.Index = index;
			// 	console.log(index)
			// 	this.centerDialogVisible = true;
			// },
			ctions(index) {
				console.log(index);
			},
			/* 查看 */
			updataIndex(index, row) {
				//点击编辑弹出弹窗并获取index
				this.Index = index;
				this.centerDialogVisible = true;
				this.upform = Object.assign({}, row); //将数据传入dialog页面
				console.log(index);
			},
			updata() {
				//点击确定修改
				console.log(this.upform)
				console.log(this.tables)
				console.log(this.index)
				for (let i = 0; i < this.upform.length; i++) {
					this.$set(this.tableData[this.Index], this.upform[i], this.upform[i])
					this.$forceUpdate()
				}
				this.centerDialogVisible = false;
				console.log(this.Index)
				this.upform = {
					id: '',
					name: '',
					address: '',
					job: '',
					phone: '',
					password: ''
				}

			},
			deleteRow(index, ) {
				this.tableData.splice(index, 1);
			},
			getTeacher() {
				this.axios({
					method: 'get',
					url: 'http://10.1.8.189:3000/api/user/all'
				}).then((res) => {
					console.log(res.data);
					this.tableData = res.data;
					console.log(this.tableData)
				})
			},
			onSubmit() {
				console.log('submit!');
			}
		},
		mounted() {
			this.getTeacher()
		}
	}
</script>
<style>
	div {
		text-align: center;
	}
	.demo-form-inline{
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}
	.gouxuan {
		width: 100px;
		height: 40px;
		font-size: 16px;
		background-color: blue;
		border: none;
		outline: none;
		border-radius: 8px;
		color: #fff;
		margin-left: 900px;
		margin-top: 20px;
	}

	.pop {
		font-size: 16px;
	}

	.pop:hover {
		background-color: #E9EEF3;
	}

	.el-form-item pop {
		width: 300px;
		line-height: 40px;

	}

	.el-form-item__content {
		width: 250px;
		line-height: 40px;
		font-size: 18px;
	}

	.el-form-item__label {
		font-size: 16px;

	}
</style>
